<template>
  <v-container class="root">
    <v-row>
      <v-col :lg="8" :md="8" :sm="8">
        <v-card class="border no-shadow" title="操作区域">
          <v-card-text>
            <OpArea />
          </v-card-text>
        </v-card>
      </v-col>
      <v-col :lg="4" :md="4" :sm="4" class="no-select">
        <v-select
          v-show="workspace.path"
          :items="rawWorkspaces"
          :model-value="workspace.path"
          item-title="name"
          item-value="path"
          label="工作空间"
          hide-details
          style="margin-bottom: 14px"
          @update:model-value="switchWorkspace"
        ></v-select>
        <v-expansion-panels variant="accordion">
          <v-expansion-panel title="操作区域配置">
            <v-expansion-panel-text>
              <OpAreaConfig />
            </v-expansion-panel-text>
          </v-expansion-panel>
          <v-expansion-panel title="代码生成配置">
            <v-expansion-panel-text>
              <CodeGenConfig />
            </v-expansion-panel-text>
          </v-expansion-panel>
        </v-expansion-panels>
        <v-container grid-list-lg>
          <v-row align="center">
            <v-col :cols="8">
              <v-select
                hide-details
                label="代码生成模板"
                :items="workspace.templates"
                v-model="usedTemplate"
                item-title="name"
                item-value="id"
              ></v-select>
            </v-col>
            <v-col :cols="4">
              <v-btn
                block
                color="blue"
                :disabled="!workspace.templates.length"
                @click="copyCode"
                >复制代码</v-btn
              >
            </v-col>
          </v-row>
        </v-container>
        <FormItemConfig v-if="workspace.ui !== UI.Unknown" />
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";

import OpArea from "./components/OpArea.vue";
import OpAreaConfig from "./components/OpAreaConfig.vue";
import CodeGenConfig from "./components/CodeGenConfig.vue";
import FormItemConfig from "./components/FormItemConfig.vue";

import { UI } from "./types";
import {
  useConfigs,
  useWorkspace,
  useFormItems,
  initCodeGenConfig,
  useConfigsStorage,
} from "./features";
import {
  bootstrap,
  mapToSystemDriver,
  generateCode,
  switchWorkspace,
} from "./system";

import { toast } from "./utils";
import copy from "copy-to-clipboard";

onMounted(() => {
  const host = window.location.host;
  const isDemo = host === "zbd329.top" || host === "47.116.163.244";

  if (isDemo) {
    const t = setTimeout(() => {
      clearTimeout(t);
      window.alert("此为演示项目，请打开控制台查阅更多信息");
    }, 16);
  }

  console.log("代码仓库: https://gitee.com/zheng-baodi/fastman");
  console.log(
    "一般来说，你需要定义自己的配置文件并启动一个本地服务，详见代码仓库"
  );
});

const { formItems, resetFormItems } = useFormItems();
const { codeGenConfig } = useConfigs();
const { workspace, rawWorkspaces, setWorkSpace, setRawWorkSpaces } =
  useWorkspace();

const usedTemplate = ref("");

try {
  const { workspace, rawWorkspaces } = await bootstrap();
  setWorkSpace(workspace);
  setRawWorkSpaces(rawWorkspaces);
} catch (error) {
  console.error(error);
  toast.fail(`配置文件加载失败，${error}`);
}

if (workspace.ui !== UI.Unknown) {
  usedTemplate.value = workspace.templates[0].id;
  initCodeGenConfig(mapToSystemDriver(workspace.ui).defaultCodeGenConfig);
  useConfigsStorage();
}

resetFormItems();

function copyCode() {
  try {
    const code = generateCode({
      ui: workspace.ui,
      items: formItems,
      template: workspace.templates.find(
        (item) => item.id === usedTemplate.value
      )!.content,
      config: codeGenConfig,
    });
    copy(code ? code : "# 系统注释：当前模板无内容");
    toast.success("复制成功！");
  } catch (error) {
    console.error(error);
    toast.fail(`复制代码时出错: ${error}`);
  }
}
</script>

<style scoped>
.root {
  min-width: 1200px;
  width: 100%;
  margin: 20px auto 0 !important;
}
</style>
